<template>
	<view class="box box-card">
		<uni-forms ref="userForm" :modelValue="userForm" labelWidth="70px" errShowType="toast">
			<uni-forms-item name="uname" label="用户名">
				<uni-easyinput v-model="userForm.uname" placeholder="用户名" maxlength="20"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="pwd" label="密码">
				<uni-easyinput type="password" v-model="userForm.pwd" placeholder="密码" maxlength="20">
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="comfirmPwd" label="确认密码">
				<uni-easyinput type="password" v-model="userForm.comfirmPwd" placeholder="确认密码" maxlength="20">
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="phone" label="手机号码">
				<uni-easyinput type="number" v-model="userForm.phone" placeholder="手机号码" :clearable="false"
					maxlength="11">
					<template v-slot:right>
						<button class="get-code" @click="getCode" :disabled="showTime">获取验证码
							<span v-if="showTime">({{seconds}})</span>
						</button>
					</template>
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item name="code" label="验证码">
				<uni-easyinput type="password" v-model="userForm.code" placeholder="验证码" maxlength="4">
				</uni-easyinput>
			</uni-forms-item>
			<uni-forms-item labelWidth="0px">
				<button class="form-button uni-mt-10" @click="register">注册</button>
			</uni-forms-item>
		</uni-forms>
		<cu-agreement :checked="agreementChecked" @change="agreementChange"></cu-agreement>
		<cu-dialog :show="dialogShow" message="注册成功" @confirm="toMy" :showCancelBtn="false"></cu-dialog>
	</view>
</template>

<script>
	import cuAgreement from '@/components/agreement.vue'
	export default {
		components: {
			cuAgreement
		},
		data() {
			return {
				userForm: {
					uname: '',
					pwd: '',
					comfirmPwd: '',
					phone: '',
					code: ''
				},
				agreementChecked: false,
				dialogShow: false,
				showTime: false,
				seconds: 60,
				timer: null,
				formRules: {
					uname: {
						rules: [{
							required: true,
							errorMessage: '请输入用户名'
						}]
					},
					pwd: {
						rules: [{
							required: true,
							errorMessage: '请输入密码'
						}]
					},
					comfirmPwd: {
						rules: [{
							required: true,
							errorMessage: '请再次输入密码'
						}, {
							validateFunction: function(rule, value, data, callback) {
								if (value === data.password) {
									return true;
								} else {
									callback('密码输入不一致，请重新输入')
								}
							}
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号码'
						}, {
							pattern: '^[1][3,4,5,7,8,9][0-9]{9}$',
							errorMessage: '请输入正确的手机号码'
						}]
					},
					code: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码'
						}]
					}
				}
			};
		},
		onReady() {
			this.$refs.userForm.setRules(this.formRules);
		},
		destroyed() {
			clearInterval(this.timer);
		},
		methods: {
			agreementChange(val) {
				this.agreementChecked = val;
			},
			getCode() {
				this.$refs.userForm.validateField(['phone']).then(res => {
					if (this.agreementChecked) {
						clearInterval(this.timer)
						this.showTime = true;
						this.seconds = 60;
						this.timer = setInterval(() => {
							this.seconds--;
							if (this.seconds <= 0) {
								this.showTime = false;
								clearInterval(this.timer);
							}
						}, 1000)
						
						this.$api.post('/appLogin/getSmsCode', {
							phone: this.userForm.phone
						}).then(res => {
							this.$util.messageTip('短信发送成功')
						})
					} else {
						this.$util.messageTip('请认真阅读隐私政策和用户协议，并勾选同意')
					}
				})
			},
			register() {
				this.$refs.userForm.validate().then(() => {
					if (this.agreementChecked) {
						let deviceInfo = getApp().globalData.deviceInfo
						this.userForm.loginDevice = JSON.stringify(deviceInfo)
						this.$api.post('/appUser/registerUser', this.userForm).then(res => {
							this.$util.saveLoginToken(res.data.token);
							this.dialogShow = true
						})
					} else {
						this.$util.messageTip('请认真阅读隐私政策和用户协议，并勾选同意')
					}
				})
			},
			toMy() {
				this.dialogShow = false
				uni.reLaunch({
					url: '/pages/my/my'
				})
			}
		}
	}
</script>
